<template>
  <div class="layout">
    <div class="header">
      <div class="logo" style="display: flex;"><img style="width: 40px ;height: 40px;margin-left: 10px;" src="../assets/favicon.png">实验室器材管理系统</div>
      <div class="userinfo">
        欢迎回来,
        <el-dropdown>
          <span class="name">{{ userInfo.userName }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="updateMyPwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="body">
      <div class="left-sider">
        <div class="menu-list">
          <div
            :class="[
              'menu-item',
              currentPmenu.menuUrl == item.menuUrl ? 'active' : '',
            ]"
            v-for="item in userInfo.menuList"
            @click="pMenuClickHandler(item)"
          >
            <div :class="['iconfont', 'icon-' + item.icon]"></div>
            <div class="menu-name">{{ item.menuName }}</div>
          </div>
        </div>
        <div class="menu-sub-list">
          <div
            @click="jump(sub)"
            :class="[
              'sub-menu',
              currentSubMenu.menuUrl == sub.menuUrl ? 'active' : '',
            ]"
            v-for="sub in currentPmenu.children"
          >
            {{ sub.menuName }}
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="tag-content">
          <el-tabs
            type="border-card"
            v-model="currentSubMenu.menuUrl"
            @tab-click="tabClick"
            @edit="editTab"
          >
            <el-tab-pane
              :name="item.menuUrl"
              :label="item.menuName"
              :closable="tabList.length > 1"
              v-for="item in tabList"
            ></el-tab-pane>
          </el-tabs>
        </div>


        <div class="body-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <UpdatePwd ref="updatePwdRef"></UpdatePwd>
  </div>
</template>

<script setup>
import UpdatePwd from "./UpdatePwd.vue";
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
const { proxy } = getCurrentInstance();
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const userInfo = ref(
  JSON.parse(sessionStorage.getItem("userInfo")) || { menuList: [] }
);

const menuMap = ref({});
const initMenuMap = () => {
  const menuList = userInfo.value.menuList;
  for (let p = 0; p < menuList.length; p++) {
    const pMenu = menuList[p];
    menuMap.value[pMenu.menuUrl] = pMenu;
    if (pMenu.children && pMenu.children.length > 0) {
      for (let s = 0; s < pMenu.children.length; s++) {
        const sub = pMenu.children[s];
        sub["parentPath"] = pMenu.menuUrl;
        menuMap.value[sub.menuUrl] = sub;
      }
    }
  }
};

//当前的一级菜单
const currentPmenu = ref({ children: [] });
const pMenuClickHandler = (data) => {
  currentPmenu.value = data;
  let firstSubMenu = data.children[0];
  jump(firstSubMenu);
};

//当前的二级菜单
const currentSubMenu = ref({});

//跳转
const jump = (data) => {
  if (currentSubMenu.value.menuUrl == data.menuUrl) {
    return;
  }
  currentSubMenu.value = data;
  addTabHander(data);
  router.push(data.menuUrl);
};

const menuSelect = (curPath, addTab) => {
  let curMenu = menuMap.value[curPath];
  if (curMenu == null) {
    return;
  }
  currentPmenu.value = menuMap.value[curMenu.parentPath];
  currentSubMenu.value = curMenu;
  if (addTab) {
    addTabHander(curMenu);
  }
};

onMounted(() => {
  initMenuMap();
  menuSelect(route.path, true);
});

//tab的操作
const tabList = ref([]);

const addTabHander = (curMenu) => {
  let currentTab = tabList.value.find((item) => {
    return item.menuUrl == currentSubMenu.value.menuUrl;
  });
  if (!currentTab) {
    tabList.value.push(curMenu);
  }
};

const tabClick = (e) => {
  const path = e.props.name;
  menuSelect(path);
  router.push(path);
};

const editTab = (targetKey, action) => {
  if (action !== "remove") {
    return;
  }
  let curPath = currentSubMenu.value.menuUrl;
  let tabs = tabList.value;
  if (targetKey == curPath) {
    tabs.forEach((tab, index) => {
      if (tab.menuUrl === targetKey) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          curPath = nextTab.menuUrl;
        }
      }
    });
  }
  tabList.value = tabs.filter((tab) => tab.menuUrl !== targetKey);
  if (curPath !== currentSubMenu.value.menuUrl) {
    router.push(curPath);
    menuSelect(curPath);
  }
};

const logout = () => {
  proxy.Confirm("确定要退出码？", async () => {
    let result = await proxy.Request({
      url: "/logout",
    });
    if (!result) {
      return;
    }
    sessionStorage.removeItem("userInfo");
    router.push("/login");
  });
};

const updatePwdRef = ref();
const updateMyPwd = () => {
  updatePwdRef.value.show();
};
</script>

<style lang="scss" scoped>
.layout {
  .body {
    .left-sider {
      width: 260px;
      display: flex;
      height: calc(100vh - 60px);
      border-right: 1px solid #f1f2f4;
      box-shadow: 0 3px 10px 0 rgba(14, 14, 14, 0.06);
      background: linear-gradient(180deg, #2c3e50, #1a1a1a); // 渐变背景
      color: #fff;

      .menu-list {
        width: 80px;
        text-align: center;
        background: rgba(0, 0, 0, 0.2); // 半透明背景
        padding-top: 20px;

        .menu-item {
          text-align: center;
          padding: 15px 0;
          cursor: pointer;
          color: #fff;
          transition: all 0.3s ease; // 平滑过渡效果
          position: relative;

          .iconfont {
            font-size: 24px;
            transition: transform 0.3s ease; // 图标动画
          }

          .menu-name {
            font-size: 12px;
            margin-top: 5px;
            font-weight: 500;
          }

          &:hover {
            color: #06a7ff;
            background: rgba(255, 255, 255, 0.1); // 悬停背景
            .iconfont {
              transform: scale(1.2); // 图标放大
            }
          }

          &.active {
            background: #06a7ff;
            color: #fff;
            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 40px;
              background: #fff; // 选中状态指示条
              border-radius: 2px 0 0 2px;
            }
          }
        }
      }

      .menu-sub-list {
        flex: 1;
        width: 180px;
        padding: 20px 10px;
        background: rgba(255, 255, 255, 0.05); // 子菜单背景
        box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.1);

        .sub-menu {
          margin-top: 10px;
          cursor: pointer;
          padding: 12px 10px;
          border-radius: 5px;
          font-size: 14px;
          color: #ddd;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.1); // 悬停背景
            color: #06a7ff;
            transform: translateX(5px); // 悬停时向右移动
          }

          &.active {
            background: rgba(6, 167, 255, 0.2); // 选中背景
            color: #06a7ff;
            font-weight: 500;
            &::before {
              content: "•";
              margin-right: 8px;
              color: #06a7ff;
            }
          }
        }
      }
    }
  }
}
.layout {
  .header {
    border-bottom: 1px solid #ddd;
    height: 60px;
    padding-right: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      font-weight: bold;
      margin-left: 5px;
      font-size: 25px;
      color: #05a1f5;
    }
    .userinfo {
      margin-right: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      .name {
        font-size: 1;
        color: #409eff;
        cursor: pointer;
      }
      .user-type {
        margin-left: 5px;
      }
      .logout {
        margin-left: 15px;
      }
    }
  }
  .body {
    display: flex;
    .main-content {
      width: 100%;
      .tag-content {
        :deep .el-tabs--border-card {
          border: none;
        }
        :deep .el-tabs__content {
          display: none;
        }
      }
      .body-content {
        padding: 10px;
      }
    }
  }
}
</style>
